
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Zip Code Lookup</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" />
    <script type="text/javascript" src="scripts/jquery-1.7.js"></script>
    <script type="text/javascript" src="scripts/jquery.mobile-1.0.1.js"></script>
    <script type="text/javascript" charset="utf-8">	        	    
	    
    	function search() {

    		var postData = {
    						zipcode: $('#zip').val()
    						};
    		
    		jstring = JSON.stringify(postData);
    		//alert('json:' + jstring);
    		
    		$.ajax({
    			url:'http://wherethechickat.appspot.com/rest/input/getJson/?zipcode=' + $('#zip').val(),  
    			type:'GET',
    			dataType: 'json',
    			contentType: "application/json; charset=utf-8",
    			success:function(res){
    				if ( res.length > 0 ) {
	    				alert("number of result: " + res.length + "\n" +
	    						"result of first record \n" +
	    						"id: " + res[0].id + " \n" + 
	    						"lat: " + res[0].lat + " \n" +
	    						"lon: " + res[0].lon + " \n" +
	    						"address: " + res[0].address + " \n" + 
	    						"city: " + res[0].city + " \n" + 
	    						"state: " + res[0].state + " \n" + 
	    						"zip: " + res[0].zipcode
	    						);
    				}
    				else {
    					alert("no record found");
    				}
    			},
    			error:function(res){
    				alert("Bad thing happend! " + res.statusText);
    			}
    		});
    		
    	}    	    	

    </script>
  </head>
  <body>
  <div data-role="page">
  	<div data-role="header">
  		<!-- <a href="index.html" data-icon="delete" data-icon="home" data-theme="b">Home</a> -->
		<h1>Search by Zip Code</h1>
		<!-- <a href="search" data-icon="check" data-theme="b">Edit</a> -->
  	</div>
  	
  	<div data-role="content">
	    
	    <form id="myform" action="#">
	   	<table>
	   	<tr>
	   		<td width="100">zip</td>
	   		<td><input type="text" size="5"id="zip"/></td>
	   		<td width="100"></td>
	   		<td><input type="button" value="submit" onClick="search(); return false;"> </td>
	   	</tr>
	   	</table>	   	
	    </form>
	    
	    <br>
	     
	   
	</div>
  
  </div>
  </body>
</html>